const path = require('path'); //文件路径
const HTMLWebpack = require('html-webpack-plugin'); //html模板
const VueLoaderPlugin = require("vue-loader/lib/plugin") // vue-loader
const merge = require('webpack-merge'); // 文件合并
const base = require('./webpack.base');
module.exports = merge(base, {
    mode: 'development',
    output: {
        filename: 'index.js'
    },
    module: {
        rules: [
            // 处理less
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            // 处理css
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 处理图片
            {
                test:/\.(jpg|png|gif|jpeg)$/i,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:100,
                            name: '[name]_[hash:7].[ext]',
                            outputPath: './static/images',
                            publicPath:'../static/images'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        // 模板
        new HTMLWebpack({
            template: path.resolve(__dirname, '../index.html')
        })
    ],
    devServer: {
        host: '127.0.0.1',
        port: 8888

    }
})